<script setup>
import { mainStore } from '@/store/index';
import axios from 'axios';
import { onMounted, reactive } from 'vue';
const store = mainStore();

const data = reactive({
  "cL_Day": 0,
  "cL_month": 0,
  "cL_year": 0,
  "cL_all": 0
})
const getData = () => {
  axios.post('http://10.59.30.132:8001/api/TRQ/QueryTrqCl').then(res => {
    const { cL_Day, cL_month, cL_year, cL_all } = res.data;
    data.cL_Day = cL_Day;
    data.cL_month = cL_month;
    data.cL_year = cL_year;
    data.cL_all = cL_all;
  })
}
onMounted(() => {
  getData();
})
</script>

<template>
  <div class="NaturalGasTransfer">
    <div class="header">
      <div class="title"></div>
      <div class="unit">单位:万方</div>
    </div>
    <div class="iframe">
      <div class="item">
        <div class="icon"><img src="@/assets/blueCube.png" alt=""></div>
        <div class="title">瞬时流量</div>
        <div class="number">{{ store.NaturalGasTransfer.shunshiliuliang.toFixed(2) }}</div>
      </div>
      <div class="item">
        <div class="icon"><img src="@/assets/greenCube.png" alt=""></div>
        <div class="title">当日累计</div>
        <div class="number">{{ data.cL_Day.toFixed(2) }}</div>
      </div>
      <div class="item">
        <div class="icon"><img src="@/assets/yellowCube.png" alt=""></div>
        <div class="title">当月累计</div>
        <div class="number">{{ data.cL_month.toFixed(2) }}</div>
      </div>
      <div class="item">
        <div class="icon"><img src="@/assets/cyanCube.png" alt=""></div>
        <div class="title">年度累计</div>
        <div class="number">{{ data.cL_year.toFixed(2) }}</div>
      </div>
      <div class="item">
        <div class="icon"><img src="@/assets/blueCube.png" alt=""></div>
        <div class="title">历年累计</div>
        <div class="number">{{ data.cL_all.toFixed(2) }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.NaturalGasTransfer {
  width: 32%;
  height: 100%;
  background-image: url("@/assets/smallCard.png");
  background-size: 100% 100%;
  position: relative;

  .header {
    height: .2031rem;
    width: 100%;
    display: flex;
    position: relative;

    .title {
      height: .2031rem;
      width: 40%;
      display: inline-block;
      background-image: url('@/assets/title/NaturalGasTransfer.png');
      background-repeat: no-repeat;
      background-size: 0.62rem .1406rem;
      background-position: .0521rem 50%;
    }

    .unit {
      position: absolute;
      font-size: 0.06rem;
      font-weight: 500;
      color: #FFFFFF;
      right: 15%;
      top: 50%;
    }
  }

  .iframe {
    height: calc(100% - .2031rem);
    width: 100%;
    padding: .05rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 90%;
      height: 15%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0)30%, #004596 100%);
      display: flex;
      justify-content: space-around;
      align-items: center;

      .icon {
        width: 33.33%;
        display: flex;

        img {
          width: .2188rem;
          height: .1719rem;
        }
      }

      .title {
        width: 28.33%;
        font-size: .0625rem;
        font-weight: 600;
        color: #FFFFFF;
      }

      .number {
        width: 43.33%;
        font-size: .0729rem;
        font-weight: bold;
        color: #FFFFFF;
        background: linear-gradient(0deg, #FFFFFF 0%, #18BEF6 98.974609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }


}
</style>